<template>
    <div class="back_contain_n">	
        <!-- 头部搜索 -->
        <div class="Search_Top_Part">
            <div class="search_list" >
                <div>				
                    <div class="input_flex">
                        <el-select clearable v-model="queryForm.itemName" placeholder="大类" @change="itemNameChange">
                            <el-option v-for="(item,index) in itemNameList" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                    </div>
                    <div class="input_flex">
                        <el-select clearable v-model="queryForm.itemAlias" placeholder="品类">
                            <el-option v-for="(item,index) in itemAliasList" :key="index" :label="item.itemAlias" :value="item.itemAlias"></el-option>
                        </el-select>
                    </div>
                    <div class="input_flex">
                        <el-input clearable v-model="queryForm.materialCode" placeholder="物料代码"></el-input>
                    </div>
                    <div class="input_flex">
                        <el-input clearable v-model="queryForm.materialName" placeholder="物料名称"></el-input>
                    </div>
                    <div class="input_flex">
                        <el-select clearable v-model="queryForm.status" placeholder="状态">
							<el-option label="停用" value="1"></el-option>
							<el-option label="启用" value="0"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="search_bt">
                <span class="zll-search" @click="getList">搜索</span>
                <span class="zll-search-reset" @click="searchReset()">重置</span>
            </div>
        </div>
		<div class="Search_Top_Input">
			<div class="addNew">
				<span @click="edit({},'add')" v-if="hasRole('') "><i class="el-icon-circle-plus-outline"></i> 新增</span>
			</div>
		</div>
        <!-- table -->
        <sys-table  
            :tableData="tableData" 
            :tableLoading="tableLoading" 
            :tableHeader="tableHeader"
			ref="systable"
            :scopeWidth="120"
        >
            <template slot-scope="scope" slot="operate">
                <el-button @click="edit(scope.row,'see')" type="text" size="small">查看</el-button>
                <el-button @click="edit(scope.row,'edit')" type="text" size="small">编辑</el-button>
                <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
            </template>
        </sys-table>
        <div class="zll-dialog">
            <popout :title="'物料 · ' + (type == 'edit'?'编辑':(type =='see'?'查看':'新增'))" :visible.sync="addDialog" v-if="addDialog" class="largeSize">
                <add ref="add" slot="content" :editData="editData" :type="type" :itemNameList="itemNameList" :itemMap="itemMap" @refreshData="refreshData"></add>
                <template slot="bottom">
                    <p class="zll-botton Info" @click="addDialog = false">关 闭</p>
                    <p class="zll-botton" v-if="type !== 'see'" @click="()=>{this.$refs.add.submitForm('addForm')}">提交</p>
                </template>
            </popout>
        </div> 
    </div>
</template>

<script>
import Add from './add'
export default {
    data(){
        return {
            tableLoading:true, //table刷新
            type: '',
            editData: {},
			queryForm: {
				itemName: '',
				itemAlias: '',
				materialCode: '',
				materialName: '',
				status: ''
            },
            tableData: [
                {}
            ],
            tableHeader:[],
            addDialog: false,

			itemNameList: [],
			itemMap: {},
			itemAliasList: []
        }
    },
    methods: {
		getList(){//获取表格数据
			let self = this;
			self.$refs.systable.resetPage();
			self.tableData = [];
			self.tableLoading = true;
			self.$http({
				url: "/jinl/material/getMaterialSelect",
				method: "post",
				data: JSON.stringify(self.queryForm),
				dataType: 'json',
				contentType: 'application/json',
			}).then(resp=>{
				if (resp.success) {
					self.tableHeader = [
						{"columnValue": "itemName", "columnName": "大类" },
						{"columnValue": "itemAlias", "columnName": "品类" },
						{"columnValue": "materialCode", "columnName": "物料代码" },
						{"columnValue": "materialName", "columnName": "物料名称" },
						{"columnValue": "formatMaterial", "columnName": "规格" },
						{"columnValue": "measureUnit", "columnName": "计量单位" },
						{"columnValue": "materialStatusCn", "columnName": "状态",refColor:true },
						{"columnValue": "createrName", "columnName": "创建人" },
						{"columnValue": "editorName", "columnName": "编辑人" },
					];
					for (let data of resp.result){
						data.createrName = data.createrName+"  "+data.createTimeFt;
						data.editorName = data.editorName+"  "+data.updateTimeFt;
					}
					self.tableData = resp.result;
					self.tableLoading = false;
				}
			})
		},

        edit(val,type) {
        	let self = this;
        	self.addDialog = true;
        	self.$nextTick(()=> {
        		self.type = type;
        		self.editData = Object.assign({},val);
			});
        },

		refreshData() {
        	this.getList();
        	this.addDialog = false;

		},

		deleteRow(rowData) {
        	let self = this;

			self.$confirm('是否确认删除？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				self.$http({
					url: '/jinl/material/deleteMaterial',
					method: "post",
					data: JSON.stringify({ids: [rowData.id]}),
					dataType: 'json',
					contentType: 'application/json',
				}).then(resp => {
					if (resp.success) {
						self.getList();
						self.$message.success('删除成功！');
						return
					}
					self.$message.error(resp.message);
				});
			});
		},

        searchReset() { //重置搜索
            this.queryForm = {
				itemName: '',itemAlias: '',materialCode: '',materialName: '',status: ''
            };
            this.getList();
        },

		getCategoryMap() {//获取搜索下拉框数据
        	let self = this;
        	self.itemNameList = [];
        	self.itemMap = {};
        	self.itemAliasList = [];
        	self.$http({
				url: "/jinl/sysItem/getCategoryMap",
				method: "post",
			}).then(resp => {
				if (resp.success){
					self.itemMap = resp.result;
					self.itemNameList = Object.keys(resp.result);
				}

			});

		},

		itemNameChange(val){
        	let self = this;
        	self.queryForm.itemAlias = '';
        	self.itemAliasList = self.itemMap[val];
		}
    },
    mounted(){
        let self = this;

        self.getCategoryMap();

        self.getList();
        self.$eventBus.$on("updateWorkList",function () {
            self.addDialog = false;
            self.getList()
        })
    },
    components: {
        Add
    },
}
</script>

<style lang="scss" scoped>
@import "@/style/SearchTop.scss";
.leftList {
    display: flex;
    margin-bottom: 15px;
    li {
        list-style: none;
        width: 100px;
        height: 30px;
        line-height: 28px;
        border-bottom: 1px solid #fff;
        color: #333;
        text-align: center;
        cursor: pointer;
        margin-bottom: 10px;
        transition: all .5s;
        position: relative;
        display: flex;
        justify-content: center;
        &.active {
            color: #ff9935;
            border-color: #ff9935;
            position: relative;
            font-weight: 600;
            font-size: 14px;
        }
    }
}
</style>